<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>Cases列表</title>
    <!--CSS-->
    <link rel="stylesheet" type="text/css" media="all" href="/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" media="all" href="/css/common.css"/>
    <script type="text/javascript" src="/layui/layui.all.js"></script>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/echarts.min.js"></script>
    <link rel="stylesheet" type="text/css" media="all" href="/css/CaseManager.css"/>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-sm12">
            <!--标题-->
            <div style="width: 160px; font-weight: bolder; font-size: large; margin-top: 20px; margin-left: auto; margin-right: auto">服务管理平台</div><br/>

            <div class="layui-col-xs3">
                <div class="demoTable">
                    搜索服务：
                    <div class="layui-inline">
                        <input class="layui-input" name="serverNames" id="serverName" autocomplete="off" />
                    </div>
                    <button class="layui-btn" data-type="reload">搜索</button>
                </div>
            </div>
            <div class="layui-col-xs3">
                <div class="demoTable">
                    负责人：
                    <div class="layui-inline">
                        <input class="layui-input" name="leaders" id="leader" autocomplete="off" />
                    </div>
                    <button class="layui-btn" data-type="reload">搜索</button>
                </div>
            </div>
            <div class="layui-col-xs4">
                搜索平台：
                <!--<div class="layui-input-inline" style="width: 160px;">-->
                <!--<div class="layui-form">-->
                <!--<select name="platforms" id="platform">-->
                <!--<option value="">请选择模块</option>-->
                <!--</select>-->
                <!--</div>-->
                <!--</div>-->
                <!--<button class="layui-btn" data-type="reload">搜索</button>-->

                <div class="layui-inline">
                    <input class="layui-input" name="platform" id="platform" />
                </div>
                <button class="layui-btn" data-type="reload">搜索</button>
            </div>
        </div>

        <!--主表格-->
        <table class="layui-table" id="ServerTable" lay-filter="table"></table>
        新建Case按钮

        <div>
        <button type="button" class="layui-btn" id="test1" >
        <i class="layui-icon">&#xe67c;</i>上传文件
        </button>
        </div>
        <br/>
        <form id="upload"  method="post " enctype="multipart/form-data" >
        <td><input class=" layui-btn-primary" STYLE="width: 70px " type="file" name="file"/></td>
        <br/>
        <br/>
        <td><button class="layui-btn layui-btn-warm" STYLE="width: 72px;height: 30px " type="submit" value="上传"  onclick="uploadPic();"><上传></上传></button></td>
        </form>
    </div>

</div>


<div class="fly-footer" style="margin-right: auto; margin-left: auto; width: 200px;">
    <p><a href="#" target="_blank">我打 - 测试部</a> 2018</p>
</div>

<script>

    function uploadPic() {
        var form = document.getElementById('upload'),
            formData = new FormData(form);
        $.ajax({
            url: "/download/uploadAllFile",
            type: "post",
            data: formData,
            processData: false,
            contentType: false,
            async: true
            ,function(data){
                layer.alert("succeesd")
            }
        })
    }

    layui.use('table', function(){
        var table = layui.table,$ = layui.jquery;
        table.render({
            elem: '#ServerTable'
            ,url:'/api/cases/getServerForPaging'
            ,cellMinWidth: 80
            ,page: true
            ,id: 'testReload'
            ,cols: [[
                {field:'id', title: 'ID',  align:'center', width: 60}
                ,{field:'moduleName', title: '模块说明', align:'center', width: 150}
                ,{field:'serverName', title: '服务名', align:'center', width: 250}
                ,{field:'apiName', title: '接口名', width: 220}
                ,{field:'eStatus', title: '启用', width: 80,template:'#checkboxs',unresize: true}
                ,{field:'leader', title: '负责人', align:'center', width: 100}
                ,{field:'platform', title: '平台', align:'center', width: 150 }
                ,{field:'description', title: '描述', align:'center', width: 500}
                //  ,{fixed: 'right', width:80, align:'center', toolbar: '#serverbar'}
            ]],
            where: {
                serverName: '',
                platform: '',
                leader:'',
                selectType: '0'
            },
            request: {
                //页码的参数名称，默认：page
                pageName: 'pageNumber',
                //每页数据量的参数名，默认：limit
                limitName: 'pageSize'
            },
            response: {
                //数据总数的字段名称，默认：count
                countName: 'total',
                //数据列表的字段名称，默认：data
                dataName: 'rows'
            }
        });

        var $ = layui.$, active = {
            /*表格重载*/
            reload: function(){
                var leader = $('#leader');
                var serverName = $('#serverName');
                var platform = $('#platform');
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        Leader: leader.val(),
                        ServerName: serverName.val(),
                        Platform: platform.val(),
                        selectType: '1'
                    }
                });
            }
        };
        $('.layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        $('.demoTable. layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        // Table 工具栏
        table.on('tool(table)', function(obj){
            var data = obj.data;
            if(obj.event === 'serverDetail'){
                loadPageWithBlank("/case/detail?caseID=" + data.id)
            }
        });
    });


    $.get(
        "/api/module/getServerFromServer", {
            pageNumber: 1,
            pageSize: 10,
        }, function (data) {

            var objectD = JSON.parse(data);

            /*填充下拉框*/
            $.each (objectD.rows, function (key, value) {
                var result = '<option value="' + value.name + '">' + value.name + '</option>';
                $('#platform').append(result);
            })

            /*刷新form, 包括样式和下拉框*/
            layui.use('form', function(){

                //只有执行了这一步，部分表单元素才会自动修饰成功
                var form = layui.form;
                form.render();
            });
        }
    )

    // 载入页面(From当前网页)
    function loadPage(url) {
        window.location.href = url;
    }

    // 载入页面(打开新网页)
    function loadPageWithBlank(url) {
        window.open(url);
    }
</script>
<script type="text/html" id="checkboxs">
    {{#  if(d.eStatus == "1"){ }}
    <input type="checkbox" name="eStatus" lay-skin="switch" checked="checked" disabled="disabled" />
    {{#  } else { }}
    <input type="checkbox" name="eStatus" lay-skin="switch" disabled="disabled" />
    {{#  } }}
</script>





<script type="text/html" id="serverbar">
    <a class="layui-btn layui-btn-xs" lay-event="serverDetail">查看/编辑</a>
</script>

</body>



</html>